<template>
  <div class="container">
    <Header :user="currentUser"></Header>
    <column-list :list='list'></column-list>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import ColumnList, { ColumnProps } from './components/ColumnList.vue'
import Header, { UserProps } from './components/Header.vue'

const testData: ColumnProps[] = [
  {
    id: 1,
    title: 'test1的专栏',
    description: '这是test1专栏，有一段描述可以更新一下',
    avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2071618763,2733850504&fm=26&gp=0.jpg'
  },
  {
    id: 2,
    title: 'test2的专栏',
    description: '这是test2专栏，有一段描述可以更新一下'
    // avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605351302715&di=7390adbac355f75c0a37005bc8eaf846&imgtype=0&src=http%3A%2F%2Fww4.sinaimg.cn%2Fmw690%2Fab769ff6gy1ghbgnli4z2j21o00u04mz.jpg'
  },
  {
    id: 3,
    title: 'test3的专栏',
    description: '这是test3专栏，有一段描述可以更新一下',
    avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605351302714&di=f7fa3155420768e309dd49caa82627ef&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20191218ac%2F332%2Fw1215h717%2F20191218%2F4480-ikvenft8826361.jpg'
  }
]

const currentUser: UserProps = {
  isLogin: true,
  name: '张慧栋'
}
export default defineComponent({
  name: 'App',
  components: { ColumnList, Header },
  setup () {
    return { list: testData, currentUser }
  }
})
</script>

<style>
</style>
